<template>
  <a-drawer v-model:visible="visible" title="设备防区详细信息" placement="right" :width="650">
    <a-form ref="form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item>
            <a-button type="primary" @click="handleZoneAdd">新增防区</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
      <template v-slot:bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'action'">
          <a @click="onDetail(record)">编辑</a>
          <a-divider type="vertical" />
          <a style="color: red" @click="onDelete(record)">删除</a>
        </template>
      </template>
    </a-table>

    <a-modal v-model:visible="visibleForm" title="防区信息编辑" :footer="false" centered>
      <div class="p-5">
        <a-form ref="form" :model="model" :rules="rules" :label-col="{ span: 5 }" @finish="onFinish">
          <a-form-item label="防区名称" name="zoneName">
            <a-input v-model:value="model.zoneName" placeholder="请输入防区名称" />
          </a-form-item>
          <a-form-item label="防区编号" name="zoneCode">
            <a-input v-model:value="model.zoneCode" placeholder="请输入防区编号" />
          </a-form-item>
          <a-form-item label="设备编码" name="equipmentCode">
            <a-select v-model:value="model.equipmentCode" disabled>
              <template v-for="(item, idx) in equipmentList" :key="idx">
                <a-select-option :value="item.equipmentCode">
                  {{ item.name }}
                </a-select-option>
              </template>
            </a-select>
          </a-form-item>
          <a-form-item label="站点信息" name="stationCode">
            <a-select v-model:value="model.stationCode" disabled>
              <a-select-option value="">请选择</a-select-option>
              <template v-for="(vo, index) in stationList" :key="index">
                <a-select-option :value="vo.stationCode">
                  {{ vo.name }}
                </a-select-option>
              </template>
            </a-select>
          </a-form-item>
          <a-form-item label="操作">
            <a-button type="primary" html-type="submit">提交保存</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </a-drawer>
</template>

<script>
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { equipmentZoneListApi, equipmentZoneAddApi, equipmentZoneModifyApi, equipmentZoneDeleteApi } from '/@/api/equipment/zone';
import { equipmentListApi } from '/@/api/equipment/index';
import { stationListApi } from '/@/api/station/index';
export default defineComponent({
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();

    // 设备编码
    let eq_code = '';

    // 站点编码
    let st_code = '';

    let model = ref({
      // 设备编码
      equipmentCode: '',
      // 站点编码
      stationCode: '',
      // 防区编号
      zoneCode: '',
      // 防区名称
      zoneName: '',
    });

    let rules = ref({
      zoneName: [{ required: true, message: '请输入防区名称' }],
      zoneCode: [{ required: true, message: '请输入防区编号' }],
      stationCode: [{ required: true, message: '请选择站点' }],
      equipmentCode: [{ required: true, message: '请选择设备' }],
    });

    let visible = ref(false);

    let visibleForm = ref(false);

    // 设备列表
    let equipmentList = ref([]);

    // 站点列表
    let stationList = ref([]);

    // 列表
    let dataSource = ref([]);

    let columns = ref([
      {
        title: '防区名称',
        align: 'center',
        dataIndex: 'zoneName',
      },
      {
        title: '防区编号',
        align: 'center',
        dataIndex: 'zoneCode',
      },
      {
        title: '站点名称',
        align: 'center',
        dataIndex: 'stationCode',
        customRender: ({ text }) => {
          return stationList.value.find((item) => item.stationCode === text)?.name;
        },
      },
      {
        title: '设备名称',
        align: 'center',
        dataIndex: 'equipmentCode',
        customRender: ({ text }) => {
          return equipmentList.value.find((item) => item.equipmentCode === text)?.name;
        },
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
      },
    ]);

    watch(
      () => visible.value,
      (val) => {
        if (val) {
          initEquipment();
          initStation();
        }
      }
    );

    /**
     * 初始化防区列表
     */
    function init(event) {
      let { equipmentCode, stationCode } = event;
      // 设备编码
      eq_code = equipmentCode;
      // 站点编码
      st_code = stationCode;
      Object.assign(model.value, { equipmentCode, stationCode });
      let data = {
        equipmentCode,
      };
      equipmentZoneListApi(data).then((res) => {
        dataSource.value = res;
      });
    }

    /**
     * 初始化设备列表
     */
    function initEquipment() {
      equipmentListApi().then((res) => {
        equipmentList.value = res;
      });
    }

    /**
     * 初始化站点列表
     */
    function initStation() {
      stationListApi({}).then((res) => {
        stationList.value = res;
      });
    }

    /**
     * 新增防区
     */
    function handleZoneAdd() {
      Object.keys(model.value).map((_) => {
        if (['id', 'createTime', 'modifyTime'].includes(_)) {
          delete model.value[_];
        } else if (['zoneCode', 'zoneName'].includes(_)) {
          model.value[_] = '';
        }
      });
      visibleForm.value = true;
    }

    /**
     * 编辑信息
     */
    function onDetail(data) {
      Object.assign(model.value, {
        ...data,
      });
      visibleForm.value = true;
    }

    /**
     * 删除防区信息
     */
    function onDelete({ id }) {
      equipmentZoneDeleteApi({ id }).then((res) => {
        init({ equipmentCode: eq_code, stationCode: st_code });
      });
    }

    /**
     * 提交保存数据
     */
    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        equipmentZoneAddApi(data).then((res) => {
          proxy.$refs.form.resetFields();
          visibleForm.value = false;
          init({ equipmentCode: eq_code, stationCode: st_code });
        });
      } else {
        equipmentZoneModifyApi(data).then((res) => {
          proxy.$refs.form.resetFields();
          visibleForm.value = false;
          init({ equipmentCode: eq_code, stationCode: st_code });
        });
      }
    }

    return {
      visible,
      visibleForm,
      model,
      rules,
      equipmentList,
      stationList,
      dataSource,
      columns,
      init,
      onFinish,
      onDetail,
      onDelete,
      handleZoneAdd,
    };
  },
});
</script>